<template>
  <div>
    <el-row type="flex" class="row-bg" justify="center">
      <el-col :span="8">事项编号：{{ childmessage.number }}</el-col>
      <el-col :span="2"></el-col>
      <el-col :span="8">上报人：{{ childmessage.reportPerson }}</el-col>
    </el-row>
    <el-row type="flex" class="row-bg" justify="center">
      <el-col :span="8">上报时间：{{ childmessage.date }}</el-col>
      <el-col :span="2"></el-col>
      <el-col :span="8" style="cursor: pointer" @click.native="openClik"
        >事件地点：<i class="el-icon-map-location" style="font-size: 20px"></i>{{ childmessage.location }}</el-col
      >
    </el-row>
    <el-row type="flex" class="row-bg" justify="center">
      <el-col :span="8">上报人所属网格：{{ childmessage.gridSource }}</el-col>
      <el-col :span="2"></el-col>
      <el-col :span="8">上报人电话：{{ childmessage.phone | PhoneFormat }}</el-col>
    </el-row>
    <el-row type="flex" class="row-bg" justify="center">
      <el-col :span="8">问题类型：{{ childmessage.typeName }}</el-col>
      <el-col :span="2"></el-col>
      <el-col :span="8">问题描述：{{ childmessage.describe }}</el-col>
    </el-row>
    <el-row type="flex" class="row-bg" justify="center">
      <el-col :span="8">事项进度：<span>已核实</span></el-col>
      <el-col :span="2"></el-col>
      <el-col :span="8">事件来源：{{ childmessage.matterSource }}</el-col>
    </el-row>
    <el-row type="flex" class="row-bg" justify="center" v-show="childmessage.verifyResult">
      <el-col :span="8">核实结果：{{ childmessage.verifyResult }}</el-col>
      <el-col :span="2"></el-col>
      <el-col :span="8"></el-col>
    </el-row>
    <el-row type="flex" class="row-bg" justify="center" v-show="childmessage.voice">
      <el-col :span="9"
        >音频文件：<audio
          ref="audio"
          :src="childmessage.voice"
          autoplay="autoplay"
          preload="auto"
          controls="controls"
        ></audio>
      </el-col>
      <el-col :span="1"></el-col>
      <el-col :span="8"> </el-col>
    </el-row>
    <el-row type="flex" class="row-bg" justify="center" v-if="childmessage.photograph">
      <el-col :span="3">图片证明：</el-col>
      <el-col :span="5">
        <el-image
          style="width: 120px; height: 120px"
          :src="childmessage.photograph[0]"
          :preview-src-list="childmessage.photograph"
        >
        </el-image
      ></el-col>
      <el-col :span="5"
        ><el-image
          style="width: 120px; height: 120px"
          :src="childmessage.photograph[1]"
          :preview-src-list="childmessage.photograph"
          v-if="childmessage.photograph[1]"
        >
        </el-image
      ></el-col>
      <el-col :span="5"
        ><el-image
          style="width: 120px; height: 120px"
          :src="childmessage.photograph[2]"
          :preview-src-list="childmessage.photograph"
          v-if="childmessage.photograph[2]"
        >
        </el-image
      ></el-col>
    </el-row>
    <el-row type="flex" class="row-bg" justify="center" v-if="childmessage.scenephotographList">
      <el-col :span="3">处置图片:</el-col>
      <el-col :span="5">
        <el-image
          style="width: 120px; height: 120px"
          :src="childmessage.scenephotographList[0]"
          :preview-src-list="childmessage.scenephotographList"
          v-if="childmessage.scenephotographList[0]"
        >
        </el-image
      ></el-col>
      <el-col :span="5"
        ><el-image
          style="width: 120px; height: 120px"
          :src="childmessage.scenephotographList[1]"
          :preview-src-list="childmessage.scenephotographList"
          v-if="childmessage.scenephotographList[1]"
        >
        </el-image
      ></el-col>
      <el-col :span="5"
        ><el-image
          style="width: 120px; height: 120px"
          :src="childmessage.scenephotographList[2]"
          :preview-src-list="childmessage.scenephotographList"
          v-if="childmessage.scenephotographList[2]"
        >
        </el-image
      ></el-col>
    </el-row>
    <el-row type="flex" class="row-bg" justify="center" v-if="childmessage.verifyphotographList">
      <el-col :span="3">核实图片：</el-col>
      <el-col :span="5">
        <el-image
          style="width: 120px; height: 120px"
          :src="childmessage.verifyphotographList[0]"
          :preview-src-list="childmessage.verifyphotographList"
        >
        </el-image
      ></el-col>
      <el-col :span="5"
        ><el-image
          style="width: 120px; height: 120px"
          :src="childmessage.verifyphotographList[1]"
          :preview-src-list="childmessage.verifyphotographList"
          v-if="childmessage.verifyphotographList[1]"
        >
        </el-image
      ></el-col>
      <el-col :span="5"
        ><el-image
          style="width: 120px; height: 120px"
          :src="childmessage.verifyphotographList[2]"
          :preview-src-list="childmessage.verifyphotographList"
          v-if="childmessage.verifyphotographList[2]"
        >
        </el-image
      ></el-col>
    </el-row>
    <el-dialog :append-to-body="true" top="30px" :visible.sync="centerDialogVisible" width="80%" center>
      <BDmap v-if="centerDialogVisible" :childmessage="message" :locations="location"></BDmap>
    </el-dialog>
  </div>
</template>
<script>
import Seats from '@/api/Seats'
import { PhoneFormat } from '@/utils/pipe'
import api from '@/api/api'
export default {
  props: {
    childmessage: {
      type: Object,
      default() {
        return {}
      },
    },
  },
  data() {
    return {
      show: false,
      centerDialogVisible: false,
      message: {},
      location: '',
      value: '',
      radio: '1',
      options: [],
      event: 1,
      postdata: {
        matterId: 0,
        responsibilityId: '',
        status: '',
        returncause: '',
      },
      returncause: this.childmessage.returncause,
    }
  },
  methods: {
    async openClik() {
      this.location = this.childmessage.location
      await Seats.convert(this.childmessage.latitude, this.childmessage.longitude).then(e => {
        this.message.lat = e.lat
        this.message.lng = e.lng
        this.centerDialogVisible = true
      })
    },
  },
  watch: {
    deep: true,
    childmessage(newval, oldval) {},
  },
}
</script>

<style lang="scss" scoped>
.el-row {
  font-size: 14px;
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
}
.check {
  width: 88px;
  height: 37px;
  margin: 0 auto;
}
</style>
